<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>maptalks.GridLayer demo</title>
    <script src="https://cdn.jsdelivr.net/npm/maptalks@>=0.35.1/dist/maptalks.min.js"></script>
    <script src="../dist/maptalks.gridlayer.js"></script>
    <script src="gridvalue.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@>=0.35.1/dist/maptalks.css">
    <style>
        html, body { margin: 0px; height: 100%; width: 100%;}
        #map { width: 100%; height: 100%; }
        .heading { background-color: #34495e; color : #fff; padding:8px 8px; font : 24px sans-serif; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var map = new maptalks.Map("map",{
        center:      [121.52025, 31.239041],
        zoom:  16,
        // hitDetect : false,
        attributionControl : {
            'content' : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        },
        baseLayer : new maptalks.TileLayer("tile",{
            urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            subdomains: ['a','b','c','d'],
        })
    });

    new maptalks.control.Attribution({
        position : 'top-right',
        content : '<div class="heading">点击任意网格, 计算客流来源超过30%的区域</div>'
      }).addTo(map);

    // prepare grid data
    var data = [];
    for (var i = 0; i < gridvalue.length; i++) {
        var cell = gridvalue[i];
        data.push([
            cell.x - 11,
            cell.y - 11,
            {
                symbol : {
                    'polygonFill' : gridValue2FillColor(cell.value),
                    'polygonOpacity' : 0.7,
                    'lineWidth' : 0,
                    'lineColor' : '#bbb',
                    'textName' : '{value}',
                    'textSize' : { stops: [[14, 0], [18, 48]] }
                },
                properties : {
                    value : parseFloat(cell.value).toFixed(1)
                }
            }
        ]);
    }
    var grid = new maptalks.GridLayer('grid',
    [
        {
            unit: 'meter',
            center : map.getCenter(),
            width :  100,
            height : 100,
            cols      : [-12, 12],
            rows      : [-12, 12],
            data : data
        }
    ], {
        symbol : {
            'lineColor' : '#bbb',
            'lineWidth' : 1,
            'lineOpacity' : 1,
            'lineDasharray': [],
            'lineCap' : 'butt',
            'lineJoin' : 'round',
            'polygonOpacity' : 0
        },
        // renderer: 'canvas'
    })
    .addTo(map);

    new maptalks.VectorLayer('restraunt', new maptalks.Marker(map.getCenter(), {
        symbol : {
            markerType : 'ellipse',
            markerWidth : 20,
            markerHeight : 20,
            markerFill: '#f00'
        }
    })).addTo(map);

    var r = new maptalks.VectorLayer('v', {
        style : {
            filter : true,
            symbol : {
                'lineColor':"#000000",
                'lineWidth':1,
                'lineOpacity':1,
                //'line-dasharray': getLineDashArray(symbol["stroke-type"]),  //"--."
                'polygonFill':'#0ff',
                'polygonOpacity':0.5
            }
        }
    }).addTo(map);

    var threshold = 30;
    var sum = 0;

    map.on('click', function(e) {
        sum = 0;
        var rectangles = [];
        grid.visitAround(e.coordinate, function (d) {
            sum += +(d[2].properties.value);
            var rect = grid.getCellGeometry(d[0], d[1]);
            rectangles.push(rect);
            if (sum > threshold) {
                return false;
            }
            return true;
        });
        r.clear().addGeometry(rectangles);
    })

    function gridValue2FillColor(value) {
        if (value < 0.5) {
            return "#f8eb58";
        } else if (value < 1.5) {
            return "#ff8a00";
        } else if (value < 2.5) {
            return "#ff009c";
        } else {
            return "#ff0000";
        }
    }


</script>
</body>
</html>
